<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./05.css">
</head>
<body>
<div class="test1">

</div>

<div class="test2">
    <table>
        <caption>角色管理</caption>
        <thead>
        <tr>
            <th>序号</th>
            <th>年龄</th>
            <th>账号</th>
            <th>密码</th>
            <th>角色</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>1</td>
            <td>22</td>
            <td>123456</td>
            <td>123456</td>
            <th>admin</th>
        </tr>
        </tbody>

        <tfoot>
        <tr>
            <td colspan="3" >sum</td>
            <td colspan="2" >120</td>
        </tr>
        </tfoot>
    </table>
</div>


<div class="test3">
<!--    同步交互-->
    <form action="./05.html" method="get">
<!--        输入框-->
        <input aria-label="测试" type="text" name="name">
<!--        密码框-->
        <input type="password" name="pwd">
<!--        多选框-->
        <input type="checkbox"><p>香蕉</p>
        <input type="checkbox"><p>梨</p>
        <input type="checkbox"><p>苹果</p>
<!--        单选框-->
        <label>
            <input type="radio"><p>梨</p>
            <input type="radio"><p>香蕉</p>
            <input type="radio"><p>苹果</p>
        </label>
<!--        提交-->
<!--        一个表单里面只能出现一个-->
        <input type="submit" value="提交">
<!--        下拉菜单-->
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>长春</option>
            <option>哈尔滨</option>
            <option>大连</option>
        </select>

    </form>

<!--    现代浏览器，最常用的是异步交互-->
<!--    jquery ajax-->
<!--    axios-->
</div>
</body>
</html>
